<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title></title>
</head>

<body>
	<div class="container">
		<div class="row mt-5">
			<div class="col">
				<div class="spinner-border"></div>
				<div class="spinner-border text-primary"></div>
				<div class="spinner-border text-secondary"></div>
				<div class="spinner-border text-success"></div>
				<div class="spinner-border text-danger"></div>
				<div class="spinner-border text-warning"></div>
				<div class="spinner-border text-info"></div>
				<div class="spinner-border text-light"></div>
				<div class="spinner-border text-dark"></div>
			</div>

			<div class="col">
				<div class="spinner-grow"></div>
				<div class="spinner-grow text-primary"></div>
				<div class="spinner-grow text-secondary"></div>
				<div class="spinner-grow text-success"></div>
				<div class="spinner-grow text-danger"></div>
				<div class="spinner-grow text-warning"></div>
				<div class="spinner-grow text-info"></div>
				<div class="spinner-grow text-light"></div>
				<div class="spinner-grow text-dark"></div>
			</div>

			<div class="col">
				<!-- 小尺寸 -->
				<div class="spinner-border spinner-border-sm"></div>
				<div class="spinner-grow spinner-grow-sm"></div>

				<!-- 大尺寸，通过行间样式设置 -->
				<div class="spinner-border text-info" style="width: 3rem; height: 3rem;"></div>
				<div class="spinner-grow text-info" style="width: 3rem; height: 3rem;"></div>
			</div>
		</div>

		<div class="row mt-5">
			<div class="col">
				<button class="btn btn-primary" disabled>
					<span class="spinner-border spinner-border-sm"></span>
				</button>
				<button class="btn btn-primary ml-2" disabled>
					<span class="spinner-border spinner-border-sm"></span>
					loadding...
				</button>

				<button class="btn btn-primary ml-2" disabled>
					<span class="spinner-grow spinner-grow-sm"></span>
				</button>
				<button class="btn btn-primary ml-2" disabled>
					<span class="spinner-grow spinner-grow-sm"></span>
					loadding...
				</button>
			</div>
		</div>
	</div>
</body>

</html>
